<template>
    <div style="position: relative;">
        <template v-for="item, index in props.recordsList" :key="index">
            <div class="cr-layout" :class="{ 'cr-fly': item.isAdd}"
                :style="{ flexDirection: item.isMaster ? 'row-reverse' : '', float: item.isMaster ? 'right' : 'left' }">
                <div style="display: flex;">
                    <n-avatar :size="38" :src="item.head" />
                </div>
                <div :style="{ background: item.isMaster ? '#14dd73' : '#ebe8e8' }" class="cr-content">
                    {{ item.content }}
                </div>
            </div>
        </template>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import imgUrl from "@/assets/img/head.jpg";

const props = defineProps({
    recordsList: {
        type: Array,
        default: []
    }
})

onMounted(async () => {


})

</script>

<style scoped>
.cr-layout {
    display: flex;
    padding: 10px;
    gap: 10px;
    align-items: flex-start;
    max-width: 70%;
    width: 100%;
}

.cr-content {
    padding: 10px;
    border-radius: 5px;
    user-select: text;
    white-space: pre-wrap;
}

.cr-fly {
    animation: flyIn .3s ease forwards;
}

@keyframes flyIn {
    0% {
        transform: translateY(10%);
    }

    100% {
        transform: translateY(0);
    }
}
</style>
